<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<?php include "../pub/meta.html";?>
<title>typography</title>
<?php include "../pub/head-cssjs.html";?>
<link rel="stylesheet" type="text/css" href="typo.css">
</head>
<body>
<div class="page layout-lm">
<?php include "../pub/top-bar.html";?>
    <div class="wrap-container">
        <div id="container" class="clearfix">
            <div id="aside_first" class="aside">
              <div class="inner-aside">
                <?php include "../pub/asidenav-basic-css-block.html";?>
              </div>
            </div>
            <div id="main">
                <div class="inner-main">
                  <div id="typo_page" class="article">
                    <h1>排版</h1>
                    <h2>1、标题</h2>
                    <h1>H1: 故不登高山，不知天之高也；不临深溪，不知地之厚也</h1>
                    <h2>H2: 故不登高山，不知天之高也；不临深溪，不知地之厚也</h2>
                    <h3>H3: 故不登高山，不知天之高也；不临深溪，不知地之厚也</h3>
                    <h4>H4: 故不登高山，不知天之高也；不临深溪，不知地之厚也</h4>
                    <h5>H5: 故不登高山，不知天之高也；不临深溪，不知地之厚也</h5>
                    <h6>H6: 故不登高山，不知天之高也；不临深溪，不知地之厚也</h6>
                    <h2>2、段落</h2>
                    <h2>H2: 君子曰：学不可以已。</h2>
                    <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
                    <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p>
                    <h3>H3: 君子生非异也，善假于物也</h3>
                    <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。</p>
                    <h4>H4: 故君子居必择乡，游必就士，所以防邪辟而近中正也</h4>
                    <p>南方有鸟焉，名曰蒙鸠，以羽为巢，而编之以发，系之苇苕，风至苕折，卵破子死。巢非不完也，所系者然也。西方有木焉，名曰射干，茎长四寸，生于高山之上，而临百仞之渊，木茎非能长也，所立者然也。蓬生麻中，不扶而直；白沙在涅，与之俱黑。兰槐之根是为芷，其渐之滫，君子不近，庶人不服。其质非不美也，所渐者然也。</p>
                    <h2>3、ul/ol/dl</h2>
                    <ul>
                      <li>故不积跬步，无以至千里</li>
                      <li>不积小流，无以成江海</li>
                      <li>骐骥一跃，不能十步</li>
                      <li>蚓无爪牙之利，筋骨之强，上食埃土，下饮黄泉，用心一也</li>
                    </ul>
                    <ol>
                      <li>青，取之于蓝，而青于蓝</li>
                      <li>冰，水为之，而寒于水</li>
                      <li>木直中绳，輮以为轮，其曲中规</li>
                    </ol>

                    <ol>
                      <li>青，取之于蓝，而青于蓝</li>
                      <li>君子生非异也，善假于物也
                      <ul>
                        <li>吾尝终日而思矣，不如须臾之所学也</li>
                        <li>吾尝跂而望矣，不如登高之博见也
                        <ol>
                          <li>登高而招，臂非加长也，而见者远</li>
                          <li>顺风而呼，声非加疾也，而闻者彰</li>
                        </ol>
                        </li>
                      </ul>
                      </li>
                      <li>假舆马者，非利足也，而致千里</li>
                      <li>假舟楫者，非能水也，而绝江河
                      <ol>
                        <li>青，取之于蓝，而青于蓝</li>
                        <li>君子生非异也，善假于物也
                          <ul>
                            <li>吾尝终日而思矣，不如须臾之所学也</li>
                            <li>吾尝跂而望矣，不如登高之博见也</li>
                          </ul>
                        </li>
                      </ol>
                      </li>
                    </ol>
                    <dl>
                      <dt>君子曰：学不可以已</dt>
                      <dd>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。</dd>
                      <dt>君子生非异也，善假于物也</dt>
                      <dd>登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。</dd>
                      <dt>故不积跬步，无以至千里；不积小流，无以成江海</dt>
                      <dd>骐骥一跃，不能十步；驽马十驾，功在不舍。锲而舍之，朽木不折；锲而不舍，金石可镂。蚓无爪牙之利，筋骨之强，上食埃土，下饮黄泉，用心一也。蟹六跪而二螯，非蛇鳝之穴无可寄托者，用心躁也。</dd>
                    </dl>
                    <h2>4、引用</h2>
                    <blockquote>
                      <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。</p>
                      <small>庄子《劝学》</small>
                    </blockquote>
                    <h2>6、多媒体</h2>
                    <h3>6.1、图片</h3>
                    <div class="tac"><img width="499" height="292" alt="APIS图片" src="http://www.w3cplus.com/sites/default/files/styles/print_image/public/source/apis-img.jpg" typeof="foaf:Image"></div>
                    <div class="fr"><img src="images/w3cplus.jpg" alt="w3cplus" width="160" height="160"></div>
                    <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
                    <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p>
                    <div class="fl"><img src="images/w3cplus.jpg" alt="w3cplus" width="160" height="160"></div>
                    <p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。木直中绳，輮以为轮，其曲中规。虽有槁暴（pù），不复挺者，輮使之然也。故木受绳则直，金就砺则利，君子博学而日参省乎己，则知明而行无过矣。</p>
                    <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p>
                    <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。</p>
                    <h3>6.2、音频</h3>
                    <div class="tac"><audio controls="controls"></audio></div>
                    <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。</p>
                    <h3>6.3、视频</h3>
                    <div class="tac"><video controls="controls"></video></div>
                    <p>吾尝终日而思矣，不如须臾之所学也；吾尝跂而望矣，不如登高之博见也。登高而招，臂非加长也，而见者远；顺风而呼，声非加疾也，而闻者彰。假舆马者，非利足也，而致千里；假舟楫者，非能水也，而绝江河。君子生非异也，善假于物也。</p>
                  </div>
                </div>
            </div><!--main-->
        </div>
    </div><!--wrap-container-->
<?php include "../pub/footer.html";?>
</div>  
</body>
</html>

